<template>
	<view class="page-content">
		<view class="bg_fff">
			<view style="padding: 20rpx 2% 0rpx; ">
				<u-search placeholder="搜索" v-model="search_name" shape="round" :clearabled="true" :showAction="true"
					actionText="搜索" :animation="true" height="70rpx" @custom="search"></u-search>
			</view>

			<view class="swiper-box">
				<u-swiper :list="swiperList" @click="clickSwiper" indicator indicatorMode="line" radius="10"
					height="160" keyName="img">
				</u-swiper>
			</view>

			<view v-if="recommendData.length">
				<view class="good-title">
					<text>推荐</text>
					<view></view>
				</view>

				<view class="tj-box">
					<course-item :data="item" v-for="(item, index) in recommendData" :key="index"
						style="width: 33%;margin-top: 10rpx;" @clickItem="clickListItem">
					</course-item>
				</view>
			</view>
		</view>

		<u-tabs :list="typeList" @click="typeClick" lineColor="#333333"
			:activeStyle="{fontWeight: 'bold',color: '#333333',transform: 'scale(1.2)'}"
			:inactiveStyle="{color: '#999999', transform: 'scale(1)'}"></u-tabs>

		<u-list v-if="dataList.length" @scrolltolower="listScrollTolower" :customStyle="{
				flex:'1',
				marginBottom: '20rpx',paddingTop: '20rpx'
				}" height="0px">
			<view class="tj-box">
				<course-item :data="item" v-for="(item, index) in dataList" :key="index" @clickItem="clickListItem"
					style="width: 49%;margin-top: 10rpx;" :type="1">
				</course-item>
			</view>
		</u-list>
		<u-empty mode="list" v-else :customStyle="{flex:'1'}"></u-empty>


		<u-tabbar :value="value" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#C62B2C"
			inactiveColor="#707070">
			<u-tabbar-item text="首页" @click="clickBar1" name="bar1">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/homeactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../../static/img/tabbar/home.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="发布" @click="clickBar2" name="bar2">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/publishactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../../static/img/tabbar/publish.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="动态" @click="clickBar3" v-if="showXt" name="bar3">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/courseactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../../static/img/tabbar/course.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="收益" @click="clickBar5" name="bar5">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/incomeactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../../static/img/tabbar/income.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="clickBar4" name="bar4">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/mineactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../../static/img/tabbar/mine.png">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		getIndexSwiper,
		getCourses,
		getCourseCate,
		getConfig
	} from '@/config/api.js'

	export default {
		data() {
			return {
				showXt: false,
				value: 'bar3',
				swiperList: [],
				recommendData: [],
				userInfo: null,
				dataList: [],
				page: 1,
				pages: 1,
				typeList: [],
				category_id: 0,
				search_name: ""
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync("UserInfo");

			this.dataList = [];
			this.page = 1;
			this.pages = 1;

			this.getData();
			this.getcofg();
		},
		methods: {
			getcofg() {
				getConfig().then(res => {
					if (res.value == 1) {
						this.showXt = true
					} else {
						this.showXt = false
					}
				})
			},
			search() {
				if (this.search_name != "")
					uni.navigateTo({
						url: '/pages/course/list?name=' + this.search_name
					})
			},
			clickListItem(data) {
				if (this.userInfo == null || this.userInfo == "") {
					return;
				}

				uni.navigateTo({
					url: '/pages/course/detail/detail?id=' + data.id
				})
			},
			getData() {
				getIndexSwiper({
					keys: "CoursePage"
				}).then((res) => {
					this.swiperList = res;
				}).catch((err) => {

				});

				this.getCourseCateData();

				this.recommendData = [];

				this.getList(2);
				this.getList("");
			},
			getCourseCateData() {
				this.typeList = [];
				getCourseCate().then(res => {
					this.typeList = [{
						id: 0,
						name: "全部"
					}];

					this.typeList = this.typeList.concat(res)
				})
			},
			typeClick(data) {
				this.dataList = [];
				this.page = 1;
				this.pages = 1;
				this.category_id = data.id;
				this.getList();
			},
			getList(recommend) {

				var subData = {
					user_id: this.userInfo ? this.userInfo.id : "",
				}

				if (recommend == 2) {
					subData["recommend"] = 2;
				} else {
					subData['page'] = this.page;
				}

				if (this.category_id > 0) {
					subData['category_id'] = this.category_id;
				}

				getCourses(subData).then(res => {
					if (recommend == 2) {
						this.recommendData = res.list;
					} else {
						this.dataList = this.dataList.concat(res.list);
						this.pages = res.page.pages;
						this.page++;
					}
				});
			},
			listScrollTolower() {
				if (this.page <= this.pages) {
					this.getList();
				}
			},
			onPageScroll(e) {
				uni.$emit('onPageScroll', e); //传递参数
			},
			onReachBottom(e) {
				uni.$emit('onReachBottom', e); //传递参数
			},
			onPullDownRefresh(e) {
				uni.stopPullDownRefresh();
			},
			clickBar1() {
				// this.value = 'bar1';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-1/tabbar-1'
				})
			},
			clickBar2() {
				// this.value = 'bar2';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-2/tabbar-2'
				})
			},
			clickBar3() {
				// this.value = 'bar3';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-3/tabbar-3'
				})
			},
			clickBar4() {
				// this.value = 'bar4';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-4/tabbar-4'
				})
			},
			clickBar5() {
				// this.value = 'bar4';
				uni.switchTab({
					url: '/pages/center/income'
				})
			},
		}
	}
</script>

<style scoped>
	.swiper-box {
		width: 96%;
		box-sizing: border-box;
		margin-left: 2%;
		margin-top: 20rpx;
	}

	.good-title {
		position: relative;
		padding-left: 2%;
		margin-top: 30rpx;
		box-sizing: border-box;
	}

	.good-title>text {
		color: #000;
		font-size: 38rpx;
		font-weight: 600;
	}

	.good-title>view {
		background-color: rgba(198, 43, 44, 0.6);
		width: 35rpx;
		height: 10rpx;
		border-radius: 10rpx;
		margin-top: -10rpx;
	}

	.tj-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>
